<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="70%" destroy-on-close @closed="$emit('closed')" align-center>
		<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="110px" label-position="right" style="height:700px;overflow:auto">
            <!-- 计时 -->
            <el-row :gutter="1" v-if="methodType==1">
                <el-col :span="8">
                    <el-form-item label="底薪" prop="basic_salary">
                        <el-input v-model="form.basic_salary" type="number" placeholder="底薪" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="正班工资" prop="regular_work_money">
                        <el-input v-model="form.regular_work_money" type="number" placeholder="正班工资" readonly><template #append>元/时</template></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="加班工资" prop="overtime_work_money">
                        <el-input v-model="form.overtime_work_money" type="number" placeholder="加班工资" readonly><template #append>元/时</template></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1" v-if="methodType==1">
                <el-col :span="8">
                    <el-form-item label="房补" prop="housing_allowance_money">
                        <el-input v-model="form.housing_allowance_money" type="number" placeholder="房补" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="餐补" prop="meal_allowance_money">
                        <el-input v-model="form.meal_allowance_money" type="number" placeholder="餐补" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 计件 -->
            <el-row :gutter="1" v-if="methodType==2">
                <el-col :span="6">
                    <el-form-item label="底薪" prop="basic_salary">
                        <el-input v-model="form.basic_salary" type="number" placeholder="底薪" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="初版" prop="first_edition_money">
                        <el-input v-model="form.first_edition_money" type="number" placeholder="初版" readonly><template #append>元/件</template></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="修改版" prop="retouching_edition_money">
                        <el-input v-model="form.retouching_edition_money" type="number" placeholder="修改版" readonly><template #append>元/件</template></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="放码" prop="release_code_money">
                        <el-input v-model="form.release_code_money" type="number" placeholder="放码" readonly><template #append>元/款</template></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1" v-if="methodType==2">
                <el-col :span="8">
                    <el-form-item label="大货提成" prop="dahuo_commission_money">
                        <el-input v-model="form.dahuo_commission_money" type="number" placeholder="大货提成" readonly><template #append>元/件</template></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="房补" prop="housing_allowance_money">
                        <el-input v-model="form.housing_allowance_money" type="number" placeholder="房补" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="餐补" prop="meal_allowance_money">
                        <el-input v-model="form.meal_allowance_money" type="number" placeholder="餐补" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 计时 +  计件-->
            <el-row :gutter="1" v-if="methodType==3">
                <el-col :span="8">
                    <el-form-item label="底薪" prop="basic_salary">
                        <el-input v-model="form.basic_salary" type="number" placeholder="底薪" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="正班工资" prop="regular_work_money">
                        <el-input v-model="form.regular_work_money" type="number" placeholder="初版" readonly><template #append>元/时</template></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="加班工资" prop="overtime_work_money">
                        <el-input v-model="form.overtime_work_money" type="number" placeholder="修改版" readonly><template #append>元/时</template></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1" v-if="methodType==3">
                <el-col :span="8">
                    <el-form-item label="房补" prop="housing_allowance_money">
                        <el-input v-model="form.housing_allowance_money" type="number" placeholder="房补" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="餐补" prop="meal_allowance_money">
                        <el-input v-model="form.meal_allowance_money" type="number" placeholder="餐补" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 开始结束日期 -->
             <el-row :gutter="1">
                <el-col :span="12">
                    <el-form-item label="开始时间" prop="start_date">
                        <el-date-picker v-model="form.start_date" :value-format="'YYYY-MM-DD'" type="data" style="width:100%" placeholder="请选择开始时间" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="结束时间" prop="end_date">
                        <el-date-picker v-model="form.end_date" :value-format="'YYYY-MM-DD'" type="data" style="width:100%" placeholder="请选择结束时间" />
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 备注 -->
            <el-col :span="12">
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" placeholder="备注"></el-input>
                </el-form-item>
            </el-col>
            <!-- 当月每天时长录入 -->
            <sc-form-table ref="table" v-model="form.timing_data" :addTemplate="timeData" placeholder="暂无数据" height="300" v-if="methodType!=2" hideAdd>
                <el-table-column prop="date" label="日期" align="center"></el-table-column>
                <el-table-column prop="regular_work_time" label="正班时长" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.regular_work_time" placeholder="请输入时长"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="overtime_work_time" label="加班时长" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.overtime_work_time" placeholder="请输入时长"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
                    </template>
                </el-table-column>
            </sc-form-table>
            <!-- 补扣录入 -->
            <div class="title">补扣录入</div>
            <sc-form-table ref="table" v-model="form.report" :addTemplate="report" placeholder="暂无数据" height="300">
                <el-table-column prop="type" label="补扣" align="center">
                    <template #default="scope">
                        <el-radio-group v-model="scope.row.type" class="ml-4">
                            <el-radio label="1" size="large">补款</el-radio>
                            <el-radio label="2" size="large">扣款</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column prop="deduction_type_id" label="类型" align="center">
                    <template #default="scope">
                        <el-select v-model="scope.row.deduction_type_id" filterable placeholder="请选择补扣类型" style="width:100%" :disabled="scope.row.type==1">
                            <el-option v-for="item in buKouType" :key="item.id" :label="item.title" :value="item.id" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="money" label="金额" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.money" placeholder="请输入金额"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="补扣日期" align="center">
                    <template #default="scope">
                        <el-date-picker v-model="scope.row.date" :value-format="'YYYY-MM-DD'" type="data" style="width:100%" placeholder="请选择补扣日期" />
                    </template>
                </el-table-column>
            </sc-form-table>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增员工',
				edit: '工资录入',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {
				id: "",
                start_date:"",
                end_date:"",
                regular_work_time:"",
                overtime_work_time:"",
                remark:"",
                report:[],
                timing_data:[],
                basic_salary:"",//底薪
                regular_work_money:"",//正班时间
                overtime_work_money:"",//加班工时
                housing_allowance_money:"",//房补
                meal_allowance_money:"",//餐补
                first_edition_money:"",//初版
                retouching_edition_money:"",//修改版
                release_code_money:"",//放码
                dahuo_commission_money:"",//大货提成
                has_piece_money:"",//大货提成
			},
            rules: {
				start_date: [
					{ required: true, message: '请选择开始时间' }
				],
				end_date: [
					{ required: true, message: '请选择结束时间' }
				],
			},
            report:{type:"1"},
            timeData:{overtime_work_time:"",regular_work_time:"",remark:""},
            methodType:"",
            buKouType:[]
		}
	},
	mounted() {
        this.getMonth()
	},
	methods: {
        // 获取当月起止日期
        getMonth(){
            var today = new Date();
            var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
            var lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
            lastDayOfMonth.setDate(lastDayOfMonth.getDate() - 1);
            var formattedFirstDay = formatDate(firstDayOfMonth);
            var formattedLastDay = formatDate(lastDayOfMonth);
            function formatDate(date) {
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始，需要加 1
                var day = date.getDate().toString().padStart(2, '0');
                return year + '-' + month + '-' + day;
            }
            this.form.start_date = formattedFirstDay
            this.form.end_date = formattedLastDay
        },
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit() {
            let a = []
            this.form.report.map(item=>{
                a.push({
                    deduction_type_id:item.deduction_type_id,
                    date:item.date,
                    type:item.type,
                    money:item.money,
                    remark:item.remark,
                    id:item.id,
                })
            })
            this.form.report = a
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
                    res = await this.$API.inventory.staffSalary.input.post(this.form);
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data) {
			this.form.id = data.id
            this.methodType = data.salary.salary_way
			this.form.settlement_method = data.settlement_method
			this.form.remark = data.salary.remark
			this.monryType = data.settlement_method
			this.form.basic_salary = data.salary.basic_salary
			this.form.regular_work_money = data.salary.regular_work_money
			this.form.overtime_work_money = data.salary.overtime_work_money
			this.form.housing_allowance_money = data.salary.housing_allowance_money
			this.form.meal_allowance_money = data.salary.meal_allowance_money
			this.form.first_edition_money = data.salary.first_edition_money
			this.form.retouching_edition_money = data.salary.retouching_edition_money
			this.form.release_code_money = data.salary.release_code_money
			this.form.dahuo_commission_money = data.salary.dahuo_commission_money
			this.form.has_piece_money = data.salary.has_piece_money
            var type = await this.$API.all.deducType.get();
            this.buKouType = type.data
            var today = new Date();
            var currentYear = today.getFullYear();
            var currentMonth = today.getMonth() + 1;
            var monthData = [];
            if(currentMonth === 1 || currentMonth === 3 || currentMonth === 5 || currentMonth === 7 || currentMonth === 8 || currentMonth === 10 || currentMonth === 12){
                if(currentMonth<10){
                    currentMonth = "0" + currentMonth
                }
                for (var i = 1; i <= 31; i++) {
                    var tenDay = this.dayS(i)
                    var yes = currentYear + ' - '+ currentMonth + " - " + tenDay;
                    monthData.push({ date: yes,overtime_work_time:"",regular_work_time:"",remark:""});
                }
            }else{
                if(currentMonth<10){
                    currentMonth = "0" + currentMonth
                }
                for (var a = 1; a <= 30; a++) {
                    var dayTen = this.dayS(a)
                    var no = currentYear + '-'+ currentMonth + "-" + dayTen;
                    monthData.push({ date: no,overtime_work_time:"",regular_work_time:"",remark:""});
                }
            }
            if(data.timing_data!=''){
                this.form.timing_data = data.timing_data
            }else{
                this.form.timing_data = monthData;
            }
            if(data.report!=''){
                let rep = []
                data.report.map(item=>{
                    rep.push({
                        id:item.id,
                        type:(item.type).toString(),
                        money:item.money,
                        remark:item.remark,
                        date:item.date,
                        deduction_type_id:item.deduction_type_id==0?'':item.deduction_type_id,
                    })
                })
                this.form.report = rep
            }
        },
        // 判断天数是否小于10
        dayS(number){
            if (number < 10) {
                return "0" + number;
            } else {
                return number.toString();
            }
        },
	}
}
</script>

<style>
.el-input-group__append{
    padding: 0 6px;
}
.title{
    font-size: 16px;
    padding: 10px 10px 5px;
}
</style>
